<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS控制的SVG动画</title>
    <style>
        /*
            下面是我们可以再CSS中给动画元素设置的属性
            animation-name: 就是@keyframes说明符的名称
            animation-duration: 决定动画应该持续多久
            animation-timing-function: 如何计算中间值
            animation-iteration-count: 重复次数，infinite表示无限次
            animation-play-state: 可以设置running或者paused
            animation-delay: 开始延迟
            animation-fill-mode: 不再执行时，应该怎样操作。forwards保持结束状态、backward应用开始状态、both
        */
        .starStyle {
            animation: starAnim 2s 4 ease running;
        }
        @keyframes starAnim {
            0% {
                fill-opacity: 1;
                stroke-width: 0;
            }
            20% {
                transform: translate(100px, 50px);
            }
            50% {
                transform: translate(100px, 50px) rotate(180deg);
            }
            80% {
                transform: translate(100px, 50px) rotate(360deg);
            }
            100% {
                fill-opacity: 0;
                stroke-width: 6;
            }
        }
    </style>
</head>
<body>
    <svg width="500" height="500" viewBox="0 0 500 500" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" >
        <defs>
            <g id="starDef">
                <path d="M 38.042 -12.361 9.405 -12.944 -0.000 -40.000
                    -9.405 -12.944 -38.402 -12.361 -15.217 4.944
                    -23.511 32.361 0.000 16.000 23.511 32.361 15.217 4.944 Z" />
            </g>
        </defs>
        <use id="star" class="starStyle" xlink:href="#starDef" transform="translate(100, 100)" style="fill:#008000;stroke:#008000;" />
    </svg>
</body>
</html>